<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/reset.css" />
  <title>答题结束</title>
  <style>
    * {
      box-sizing: border-box;
    }

    html {
      height: 100%;
      min-height: 900px;
    }

    body {
      background: #F5F9FD;
      background-image: url('./imgs/endbg.png');
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: 100% 424px;
    }

    .header {
      box-sizing: border-box;
      min-width: 1300px;
      text-align: center;
      background-color: #0B57BF;
      padding: 22px 0;
      font-size: 0;
    }

    .header img {
      display: inline-block;
      width: 46px;
      height: 46px;
      vertical-align: middle;
      line-height: normal;
      /* 恢复正常的行高 */
      margin-right: 16px;
    }

    .header span {
      display: inline-block;
      color: #ffffff;
      font-size: 30px;
      vertical-align: middle;
      line-height: normal;
      /* 恢复正常的行高 */
    }

    .web-content {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 90px);
      min-width: 1300px;
      padding-top: 108px;
    }

    .web-content .content-box {
      position: relative;
      width: 1272px;
      /* height: 618px; */
      background: #FFFFFF;
      margin: 0 auto;
      padding-top: 36px;
      font-size: 0;
      padding-bottom: 59px;
    }

    .examName {
      text-align: center;
      font-weight: 500;
      font-size: 30px;
      color: #333333;
      margin-bottom: 35px;
    }

    .personName-title {
      font-size: 26px;
      margin-bottom: 14px;
    }

    .personName-title span:last-child {
      font-size: 36px;
    }

    .content-box .left {
      display: inline-block;
      width: 710px;
    }

    .content-box .right {
      display: inline-block;
      vertical-align: bottom;
      width: 350px;
      border-left: 1px solid #C9C9C9;
      padding-left: 120px;
      padding-bottom: 23px;
      margin-bottom: 43px;
    }

    .tipTitle-success {
      font-weight: bold;
      font-size: 60px;
      color: #E52B2B;
      margin-bottom: 18px;
      text-align: center;
    }

    .tipTitle {
      font-size: 26px;
      text-align: center;
      margin-bottom: 85px;
    }

    .tipList {
      font-size: 0;
      position: relative;
    }

    .tipList li {
      text-align: center;
      width: 144px;
      margin-right: 30px;
      display: inline-block;
      font-weight: 400;
      font-size: 24px;
      color: #333333;
      vertical-align: top;
      position: relative;
    }

    .tipList li:last-child {
      margin-right: 0;
    }

    .tipList li img {
      display: inline-block;
      width: 51px;
      height: 51px;
      margin-bottom: 10px;
    }

    .tipList li::after{
      content: "";
      position: absolute;
      top: 24px;
      left: 98px;
      height: 2px;
      background-color: #DBDBDB;
      width: 134px;
    }
    .tipList li:nth-child(2)::after{
      width: 141px;
    }
    .tipList li:nth-child(3)::after{
      left: 116px;
      width: 141px;
    }
    .tipList li:last-child::after{
      display: none;
    }
    .score-title {
      width: 226px;
      height: 245px;
      background-image: url('./imgs/weitongguoxun.png');
      background-repeat: no-repeat;
      font-weight: 500;
      font-size: 20px;
      color: #FFFFFF;
      text-align: center;
      padding-top: 45px;
      margin-bottom: 48px;
    }

    #score {
      text-align: center;
      font-family: Roboto, Roboto;
      font-weight: 400;
      font-size: 70px;
      color: #FDFFFF;
    }

    #submitBtn {
      position: relative;
      cursor: pointer;
      width: 226px;
      line-height: 56px;
      background: #0B57BF;
      border-radius: 5px 5px 5px 5px;
      font-weight: 500;
      font-size: 22px;
      color: #FFFFFF;
      text-align: center;
    }

    .tips p {
      font-size: 20px;
      line-height: 1.6;
      color: #0B57BF;
    }
  </style>
</head>

<body>
  <div class="header">
    <img src="./imgs/endlogo.png"><span>职领未来教育系统</span>
  </div>
  <div class="web-content">
    <div class="content-box">
      <p class="examName">此处是考试的名称考试的名称</p>
      <div style="padding-left: 63px;">
        <div class="left">
          <div class="personName-title">
            <span>很遗憾</span>
            <span>李晓月</span>
          </div>
          <p class="tipTitle-success">考试未通过</p>
          <p class="tipTitle">请继续努力</p>
          <ul class="tipList">
            <li>
              <img src="./imgs/tongguo.png">
              <p>考试未通过</p>
            </li>
            <li>
              <img src="./imgs/er.png">
              <p>向培训老师申请二次开考</p>
            </li>
            <li style="width: 180px;">
              <img src="./imgs/deng.png">
              <p style="margin-bottom: 8px;">等待开考通知</p>
              <div class="tips">
                <p>未发生特殊原因</p>
                <p>二次考试为次月开考</p>
              </div>
            </li>
            <li>
              <img src="./imgs/zcks.png">
              <p>正常考试</p>
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="score-title">
            <p>得分</p>
            <p id="score">59</p>
          </div>
          <div id="submitBtn">确认</div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  // (function () {
  //   // 请求获取数据
  //   $('.score-title').text('信息系统运维管理-2024年9月第一批考试考试成绩')
  //   $('#result').text('89')
  //   $('.scoreBtn').click(function () {
  //     console.log('确定');
  //   })
  // })()
</script>

</html>